<template>
  <div v-if="layoutType === 'gird'">
    <div class="video-item-list">
      <template class="video-item" v-for="item in dataSource.list" :key="item">
        <VideoItem
            :data="item"
            :loading="imgloading"
        ></VideoItem>
      </template>
    </div>
    <div class="bottom-loading" v-if="loading">
      <img src="@/assets/images/playing.gif">数据加载中...
    </div>
    <div class="reach-bottom" v-if="dataSource.pageNo >= dataSource.pageTotal && dataSource.list.length>0">
      {{loadEndMsg}}
    </div>
    <NoData v-if="dataSource.list.length ===0 && dataSource.list"></NoData>
  </div>
  <div v-if="layoutType === 'list'">
    <div v-for="item in dataSource.list" :key="item">
      <slot name="default" :data="item"></slot>
    </div>
    <div  class="reach-bottom" v-if="dataSource.pageNo >= dataSource.pageTotal && !loading && dataSource.list.length > 0">
      {{loadEndMsg}}
    </div>
    <NoData v-if="dataSource.list.length ===0 && dataSource.list"></NoData>
  </div>
</template>
<script setup>
import {getCurrentInstance, onMounted, onUnmounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {ImgURL} from "@/utils/Request.js";
import VideoItem from "@/components/VideoItem.vue";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const props = defineProps({
  dataSource:{
    type:Object,
    default(){
      return {}
    }
  },
  loading:{
    type:Boolean
  },
  loadEndMsg:{
    type:String,
    default: "已经到底啦~"
  },
  layoutType:{
    type:String,
    default:"gird"
  },
  gridCount:{
    type:Number,
    default:5
  },
  imgloading:{
    type:Boolean,
  },
})
const emit = defineEmits(["loadDate"])
const scrollHandler = (curScrollTop)=>{
  if(window.innerHeight + curScrollTop < document.body.scrollHeight){
    return;
  }
  if(props.loading||props.dataSource.pageNo >= props.dataSource.pageTotal){
    return;
  }
  props.dataSource.pageNo++;
  emit("loadDate")
}
onMounted(()=>{
  mitter.on("windowScroll",(curScrollTop)=>{
    scrollHandler(curScrollTop)
  })
})
onUnmounted(()=>{
  mitter.off("windowScroll")
})
</script>
<style scoped lang="scss">
.data-list-grid{
  display: flex;
  grid-gap: 20px;
  padding-bottom: 10px;
}
.reach-bottom{
  text-align: center;
  line-height: 40px;
  color: #61666d;
}
.bottom-loading{
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #61666d;
  img{
    width: 10px;
    margin-right: 10px;
  }
}
.video-item-list{
  margin-top: 20px;
  margin-left: 10px;
  flex: 1;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(5, 1fr);
  .video-item{
    width: 100%;
    height: 100%;
  }
}
</style>